<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* You can remove this page div in your website */
    #page {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    /* Our normalize css */
    * {
        margin: 0;
        box-sizing: border-box;
    }

    /* Our wrapper */
    .wrapper {
        width: 900px;
        height: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    /* Our image information */
    .before,
    .after {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .content-image {
        height: 100%;
    }

    .after {
        width: 125px;
    }

    .scroller {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 100px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: transparent;
        opacity: 0.9;
        pointer-events: auto;
        cursor: pointer;
    }

    .scroller:hover {
        opacity: 1;
    }

    .scrolling {
        pointer-events: none;
        opacity: 1;
        /* // */ z-index: 1;
    }

    .scroller__thumb {
        width: 100%;
        height: 100%;
        padding: 5px;
    }

    .scroller:before,
    .scroller:after {
        content: " ";
        display: block;
        width: 7px;
        height: 9999px;
        position: absolute;
        left: 50%;
        margin-left: -3.5px;
        z-index: 30;
        transition: 0.1s;
    }

    .scroller:before {
        top: 100%;
    }

    .scroller:after {
        bottom: 100%;
    }

    /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
    .scroller {
        border: 5px solid #fff;
    }

    .scroller:before,
    .scroller:after {
        background: #fff;
    }
</style>

<body>
    <div id="page">
        <div class="wrapper">
            <div class="before">
                <img class="content-image" src="../img/层叠拖动2.jpg" draggable="false">
            </div>
            <div class="after">
                <img class="content-image" src="../img/层叠拖动1.jpg" draggable="false">
            </div>
            <div class="scroller">
                <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
                    viewbox="0 0 100 100">
                    <polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"></polygon>
                    <polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"></polygon>
                </svg>
            </div>
        </div>
    </div>
</body>
<script>
    // I hope this over-commenting helps. Let's do this!
    // Let's use the 'active' variable to let us know when we're using it
    let active = false;

    // First we'll have to set up our event listeners
    // We want to watch for clicks on our scroller
    document.querySelector('.scroller').addEventListener('mousedown', function () {
        active = true;
        // Add our scrolling class so the scroller has full opacity while active
        document.querySelector('.scroller').classList.add('scrolling');
    });
    // We also want to watch the body for changes to the state,
    // like moving around and releasing the click
    // so let's set up our event listeners
    document.body.addEventListener('mouseup', function () {
        active = false;
        document.querySelector('.scroller').classList.remove('scrolling');
    });
    document.body.addEventListener('mouseleave', function () {
        active = false;
        document.querySelector('.scroller').classList.remove('scrolling');
    });

    // Let's figure out where their mouse is at
    document.body.addEventListener('mousemove', function (e) {
        if (!active) return;
        // Their mouse is here...
        let x = e.pageX;
        // but we want it relative to our wrapper
        x -= document.querySelector('.wrapper').getBoundingClientRect().left;
        // Okay let's change our state
        scrollIt(x);
    });

    // Let's use this function
    function scrollIt(x) {
        let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth)));
        document.querySelector('.after').style.width = transform + "px";
        document.querySelector('.scroller').style.left = transform - 25 + "px";
    }

    // Let's set our opening state based off the width, 
    // we want to show a bit of both images so the user can see what's going on
    scrollIt(150);

    // And finally let's repeat the process for touch events
    // first our middle scroller...
    document.querySelector('.scroller').addEventListener('touchstart', function () {
        active = true;
        document.querySelector('.scroller').classList.add('scrolling');
    });
    document.body.addEventListener('touchend', function () {
        active = false;
        document.querySelector('.scroller').classList.remove('scrolling');
    });
    document.body.addEventListener('touchcancel', function () {
        active = false;
        document.querySelector('.scroller').classList.remove('scrolling');
    });
</script>

</html>